<template>
    <div>
      <el-container>

        <el-header>
          <el-menu  class="el-menu-demo" mode="horizontal" >

            <el-image
              style="width: 120px; height: 40px ; float: left;margin-left: 10%;margin-top: 10px"
              src="https://sf1-scmcdn-tos.pstatp.com/goofy/bcy/image/logo-home.fff267.png">
            </el-image>

            <div style="margin-left: 2%;width: 300px ; float: left">
              <el-input placeholder="搜索COS、视频、用户..." v-model="input" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>


            <el-menu-item index="3" style="margin-left: 26%;float: left" ><i class="el-icon-house"></i>首页</el-menu-item>
            <el-menu-item index="4"><i class="el-icon-bell"></i>消息</el-menu-item>

            <div>
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="float: left"></el-avatar>
            </div>

            <el-button type="danger" style="float: left;margin-left: 2%"><i class="el-icon-edit-outline"></i>发布</el-button>

          </el-menu>
        </el-header>


        <el-main>

          <div>
            <template>
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in picList" :key="item.pic">
                  <el-image
                    :src="item.pic" style="border-radius: 5px;height: 250px"></el-image>
                </el-carousel-item>
              </el-carousel>
            </template>

          </div>
          <div style="background-color: white;height: 50px;line-height: 50px;margin-left: 9.5%;width: 1200px;font-size: 18px;border-radius: 5px;">
            <span>推荐</span>
            <span style="margin-left: 3%">关注</span>
            <span style="margin-left: 3%">榜单</span>
            <span style="margin-left: 3%">视频</span>
            <span style="margin-left: 3%">手办</span>
          </div>

          <div style="height: 50px;">
            <span style="font-size: 20px;font-weight: bold;line-height: 50px;">精品手办榜</span>
            <span style="margin-left: 30%;line-height: 50px;">查看全部</span>
            <div style="width: 300px;margin-top: -45px;margin-left: 71%;">
              <el-input placeholder="搜点什么好呢" v-model="input2" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="findByName"></el-button>
              </el-input>
            </div>
          </div>

          <div>
            <el-row >
              <el-col :span="5" v-for="(o, index) in shopList" :key="index" :offset="o.id > 0 ? 1 : 1">
                <el-card shadow="hover" :body-style="{ padding: '10px' }">
                  <el-image :src="o.pic"></el-image>
                  <div style="padding: 20px;height: 50px">
                    <span v-html="o.shopName"></span>
                    <span v-html="o.shopDesc"></span>
                    <div class="bottom clearfix">
                      <time class="time" style="font-size: 10px;color: red">价格:￥{{ o.price }}元</time>
                      <el-button type="text" class="button" @click="details(o.id)">点击查看</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>

        </el-main>
      </el-container>
    </div>
</template>

<script>

  import axios from 'axios'

  axios.defaults.withCredentials=true

    export default {
        name: "toys",
      data(){
          return{
            input:'',
            input2:'',
            picList:[],
            shopList:[]
          }
      },methods:{
        findAll:function () {
          axios.get("http://localhost/bcy-shop/shop/findAllShop").then(res=>{
            if (res.data.code==200){
              this.shopList=res.data.data
            }
          })
        },details:function (id) {
          this.$router.push({path:"toysDetails",query:{id:id}})
        },findByName:function () {
          var key = this.input2
          axios.get("http://localhost/bcy-search/search/seachKey/"+key).then(res=>{
            this.shopList=res.data.data
          })
        }
      },mounted() {
          this.picList=[{id:1,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/17bl6/10d975d077f211eb90d1ab98fd97748a.jpg~tplv-banciyuan-sq90.image'},
            {id:2,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/4byj/4f959ff0661e11ebbb34f34d79189fd0.png~tplv-banciyuan-sq90.image'},
            {id:3,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/4byn/cf8a414068f611eba7f6c12b719d475f.jpg~tplv-banciyuan-sq90.image'},
            {id:4,pic:'https://p9-bcy.byteimg.com/img/banciyuan/editor/flag/4byj/8361a38065cc11eb8988e56db74e2ac7.jpg~tplv-banciyuan-sq90.image'},
            {id:5,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/17big/fb7e42b0611711eba9d3135d41441025.jpg~tplv-banciyuan-sq90.image'},
            {id:6,pic:'https://p3-bcy.byteimg.com/img/banciyuan/editor/flag/17bia/4b9091d05caf11eb8d98dd5e3e9a9ce8.png~tplv-banciyuan-sq90.image'},
            {id:7,pic:'https://p9-bcy.byteimg.com/img/banciyuan/editor/flag/17bhy/b8153880531111eb9b64dfa5f5eee659.jpg~tplv-banciyuan-sq90.image'},
            ];
          this.findAll();
      }
    }
</script>

<style scoped>
  .el-header {
    color: #333;
    text-align: center;
    line-height: 60px;
    height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: auto;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-image {
    /* position: relative; */
    display: inline-block;
    overflow: hidden;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .el-card {
    min-width: 250px;
    margin-right: 20px;
    margin-top: 20px;
    transition: all .5s;
  }






</style>
